<template>
	<view>
		<custom-header title="商家资料" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 128rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view class="_wrap">
					<view class="address_wrap">
						<view class="businessAddress">
							<view class="label">
								<view class="text">商家地址<text class="required">*</text></view>
								<view class="icon">
									<image src="/static/common/location_icon.png" mode=""></image>
									<text>定位</text>
								</view>
							</view>
							<view class="value">
								{{ form.address }}
							</view>
						</view>
						<view class="detailAddress">
							<view class="label">
								<view class="text">详情地址<text class="required">*</text></view>
							</view>
							<view class="value">
								<input type="text" placeholder="请输入详细地址" v-model="form.detailAddress">
							</view>
						</view>
						<view class="acreage">
							<view class="label">
								<view class="text">种植面积<text class="required">*</text></view>
							</view>
							<view class="value">
								<input type="text" placeholder="请输入详细地址" v-model="form.acreage">
							</view>
						</view>
					</view>
					<view class="introduce">
						<view class="label">
							<view class="text">商家介绍<text class="required">*</text></view>
						</view>
						<view class="value">
							<textarea v-model="form.introduce" placeholder="请输入商家介绍"></textarea>
						</view>
					</view>
					<view class="bg">
						<view class="label">
							<view class="text">
								店铺背景
								<text class="required">*</text>
								<text class="hint">（建议尺寸：375*200px）</text>
							</view>
						</view>
						<view class="value">
							<custom-upload :max-count="1"></custom-upload>
						</view>
					</view>
					<view class="scene">
						<view class="label">
							<view class="text">
								现场实拍
								<text class="required">*</text>
								<text class="hint">（最多6张）</text>
							</view>
						</view>
						<view class="value">
							<custom-upload :max-count="6"></custom-upload>
						</view>
					</view>
					<view class="product">
						<view class="label">
							<view class="text">
								产品实拍
								<text class="required">*</text>
								<text class="hint">（最多6张）</text>
							</view>
						</view>
						<view class="value">
							<custom-upload :max-count="6"></custom-upload>
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					:class="{'btn_disable':btnBisabled}"
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleConfirm"
					:disabled="btnLoading || btnBisabled"
					:loading="btnLoading">保存</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,computed,onMounted } from 'vue';
	import { onReady } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const store = useStore();
	import { formatTime } from '@/utils/util.js'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	});
	
	const form = ref({
		address:'云南省昆明市晋宁区昆磨高速公路晋宁区昆阳成立多肉种植基地—基地西北'
	})
	
	// 确认
	const btnLoading = ref(false)
	const handleConfirm = ()=>{
		btnLoading.value = true
		setTimeout(()=>{
			btnLoading.value = false
			uni.navigateTo({
				url:'/pages/businessInfoSuccess/businessInfoSuccess?id=123'
			})
		},500)
	}
</script>

<style lang="scss">
	._wrap{
		padding: 20rpx;
		.label{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			.text{
				color: #333;
				font-weight: bold;
				.required{
					color: #DF554A;
				}
				.hint{
					color: #BBBBBB;
				}
			}
			.icon{
				display: flex;
				align-items: center;
				image{
					width: 23rpx;
					height: 28rpx;
				}
				text{
					color: #666666;
					padding-left: 10rpx;
				}
			}
		}
		.value{
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #666;
		}
		.input-placeholder,.textarea-placeholder{
			font-size: 24rpx;
			color: #999;
		}
		input,textarea{
			font-size:24rpx;
			color: #666;
		}
		.address_wrap{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 25rpx 25rpx 0;
			
		}
		.introduce{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 25rpx;
			margin-top: 20rpx;
			.value {
				background: #F8F8F8;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				textarea{
					width: 100%;
					height: 180rpx;
				}
			}
			
		}
		.bg,.scene,.product{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 25rpx;
			margin-top: 20rpx;
		}
	}
</style>
